<script setup>
import { onMounted, ref, watch } from 'vue'
import OverviewCard from '@/components/OverviewCard.vue'
import Button from '@/components/Button.vue'
import { getBedList, getBedListByDepartment } from '@/api/bed'
import { useStatusStore } from '@/stores'

const beds = ref([])

onMounted(async () => {
  getBeds()
})

const getBeds = async () => {
  const data = await getBedList()
  // beds包括name, totalBeds, occupiedBeds, freeBeds, maintenanceBeds, beds
  beds.value = data.data.map((item) => {
    return {
      deptId: item.deptId,
      name: item.deptName,
      totalBeds: item.bedCount,
      occupiedBeds: item.occupiedBedCount,
      freeBeds: item.availableBedCount,
      beds: null
    }
  })
}

// 当前选中的科室
const selectedDepartment = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

// 选择科室查看床位详情
const selectDepartment = async (department) => {
  const data = await getBedListByDepartment({
    deptId: department.deptId,
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })

  department.beds = data.data

  selectedDepartment.value = department
}

const handlePageQuery = async () => {
  const data = await getBedListByDepartment({
    deptId: selectedDepartment.value.deptId,
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })
  selectedDepartment.value.beds = data.data
}

const statusStore = useStatusStore()
watch(
  () => statusStore.componentKey,
  async () => {
    getBeds()
  }
)
</script>

<template>
  <div class="beds">
    <!-- 床位管理标题 -->
    <h2>床位管理</h2>

    <!-- 科室床位概览 -->
    <div class="departments-overview">
      <overview-card
        v-for="department in beds"
        :key="department.name"
        class="department-card"
      >
        <h3>{{ department.name }}</h3>
        <p><strong>总床位：</strong>{{ department.totalBeds }}</p>
        <p><strong>已用床位：</strong>{{ department.occupiedBeds }}</p>
        <p><strong>空闲床位：</strong>{{ department.freeBeds }}</p>
        <!-- <p><strong>维护中：</strong>{{ department.maintenanceBeds }}</p> -->
        <Button
          extraClass="view-btn"
          text="查看详情"
          @click="selectDepartment(department)"
        >
        </Button>
      </overview-card>
    </div>

    <!-- 床位详细信息 -->
    <overview-card v-if="selectedDepartment" class="beds-details">
      <h3>{{ selectedDepartment.name }} 床位详情</h3>

      <el-table
        :data="selectedDepartment.beds.records"
        border
        stripe
        style="width: 100%"
        height="40rem"
      >
        <!-- 病房号列 -->
        <el-table-column prop="wardId" label="病房号" />
        <!-- 病房位置 -->
        <el-table-column prop="location" label="病房位置" />
        <!-- 床位号列 -->
        <el-table-column prop="bedId" label="床位号" />
        <!-- 收费情况 -->
        <el-table-column prop="chargeStandard" label="收费情况（元/天）" />
        <!-- 状态列 -->
        <el-table-column prop="status" label="状态" v-slot="scope">
          <el-tag :type="scope.row.status == '空闲' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 500]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="selectedDepartment.beds.total"
        @size-change="handlePageQuery"
        @current-change="handlePageQuery"
      />
    </overview-card>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;
@use 'sass:color';

.beds {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;

  /* 科室概览样式 */
  .departments-overview {
    @include grid-25-1_5;
    gap: 2.5rem;

    .department-card {
      color: $color-black;

      p {
        margin: 0.5rem 0;
        font-size: 1.2rem;
        font-weight: 400;
      }

      .view-btn {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        border: none;
        cursor: pointer;

        &:hover {
          transform: none;
          background-color: color.adjust(
            $color-primary-dark-2,
            $lightness: -10%
          );
        }

        &:focus {
          transform: none;
        }
      }
    }
  }

  /* 床位详情样式 */
  .beds-details {
    &:hover {
      transform: none;
    }

    .el-pagination {
      margin-top: 2rem;
      justify-self: center;
    }
  }
}
</style>
